.container {
    height: calc(100% - 60px); /* 使容器占满视口高度，减去底部按钮的高度 */
    width: 90%; /* 使容器占满整个视口宽度 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative; /* 为绝对定位的按钮提供定位上下文 */
    background: linear-gradient(135deg, #e0f7fa, #e0ffe5); /* 渐变从淡青色到淡绿色 */
}

.header {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
}

.userInfoContainer {
    width: 700px;
    background: linear-gradient(135deg,  #50ee90, #00fff0);
    border-radius: 10px; /* 圆角效果 */
    display: flex; /* 使用flex布局 */
    padding: 5px; /* 内边距 */
    gap: 80px; /* 元素之间的间距 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 5px; /* 底部间距 */
}

.avatar {
    width: 60px; /* 头像宽度 */
    height: 60px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 适应封装 */
}

.currentUser {
    display: flex; /* 使用flex布局 */
    align-items: flex-end; /* 垂直对齐底部 */
    gap: 40px; /* 设定用户名和ID之间的间距 */
}

.userDetails {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 竖直方向排列 */
}

.username {
    font-size: 20px; /* 用户名字体大小 */
    font-weight: bold; /* 加粗 */
}

.level {
    font-size: 14px; /* 字体大小 */
    color: #999; /* 级别显示为灰色 */
    margin-left: 15px; /* 左边距 */
}

.userId {
    font-size: 14px; /* ID字体大小 */
    font-style: italic; /* 斜体效果 */
}

.userRole {
    font-size: 16px; /* 角色字体大小 */
    margin-bottom: 20px; /* 顶部间距 */
}

.userPoints {
    font-size: 16px; /* 积分字体大小 */
}

.content {
    background: linear-gradient(135deg, #f0f8ff, #e6f7ff); /* 从浅蓝色到淡天蓝色的渐变 */
    width: 100%;
    height: 100%;
    border-radius: 10px; /* 圆角效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    margin: 0 auto; /* 水平居中 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中对齐 */
    text-align: center; /* 文本居中对齐 */
    gap: 20px; /* 元素之间的间距 */
}

.button {
    padding: 5px 10px;
    background-color: #007bff; /* 可选：按钮背景色 */
    color: white; /* 可选：按钮字体颜色 */
    border: none;
    border-radius: 5px; /* 可选：使按钮边角圆滑 */
    cursor: pointer; /* 鼠标悬停时显示为可点击的手型 */
    width: 150px; /* 按钮宽度 */
}